<template>
	<view class="page" :style="{ backgroundImage: 'url(' + backgroundUrl + ')' }">
		<view class="title">
			<view>Hello！<br>欢迎来到XXX</view>
		</view>
		<view class="form">
			<view class="tab">
				<view :class="loginType == 1 ? 'select type1' : 'type1'" @click="loginType = 1">快捷登录</view>
				<view :class="loginType == 2 ? 'select type2' : 'type2'" @click="loginType = 2">账号登陆</view>
			</view>
			<view class="inputs_button">
				<view class="inputs">
					<view class="account">
						<input type="number" v-model="account" :adjust-position="false" placeholder="手机号" />
					</view>
					<view class="password" v-if="loginType == 2">
						<input :type="pwdShow ? 'text' : 'password'" v-model="password" :adjust-position="false"
							placeholder="密码" />
						<uni-icons :type="pwdShow ? 'eye-filled' : 'eye-slash-filled'" size="24" color="#cccccc"
							@click="pwdShow = !pwdShow"></uni-icons>
					</view>
					<view class="vcode" v-if="loginType == 1">
						<input type="number" v-model="vcode" :adjust-position="false" placeholder="验证码" />
						<text v-if="vcodeTime == 0" style="color:#3264ed" @click="getVcode">获取验证码</text>
						<text v-else style="color:#ccc">重新获取({{ vcodeTime }}s)</text>
					</view>
				</view>
				<view class="button">
					<view @click="login">
						登录
					</view>
				</view>
			</view>
			<view class="register-link" @click="toRegister">
				没有账号？去注册 >
			</view>
		</view>
		<view class="pact">
			<radio :checked="pactChecked" activeBackgroundColor="#3264ed" activeBorderColor="#3264ed"
				borderColor="#3264ed" color="#fff" @click="pactChange" />
			<view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			account: "",
			password: "",
			vcode: "",
			loginType: 1,
			pwdShow: false,
			pactChecked: false,
			vcodeTime: 0,
			vcodeTimer: null,
			backgroundUrl: `${import.meta.env.VITE_API_BASE_URL}/login/pageBg.png`
		}
	},
	methods: {
		login() {
			uni.showToast({
				title: "登录方式" + this.loginType,
				icon: 'none'
			})
		},
		getVcode() {
			this.vcodeTime = 60
			this.vcodeTimer = setInterval(() => {
				if (this.vcodeTime > 0) {
					this.vcodeTime--
				} else {
					clearInterval(this.vcodeTimer)
					this.vcodeTimer = null
				}
			}, 1000)
			uni.showToast({
				title: "获取验证码",
				icon: 'none'
			})
		},
		pactChange() {
			this.pactChecked = !this.pactChecked
		},
		toPact() {
			uni.showToast({
				title: "协议",
				icon: 'none'
			})
		},
		toRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		}
	},
	mounted() {
		console.log('VITE_API_BASE_URL:', import.meta.env.VITE_API_BASE_URL);
	},
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-size: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.title {
		padding-top: 220rpx;
		padding-bottom: 70rpx;

		view {
			padding-left: 64rpx;
			font-size: 48rpx;
			font-weight: 700;
			color: #383838;
		}
	}

	.form {
		flex: 1;
		margin: 0 32rpx;
		border-radius: 40rpx;
		background-color: #fff;
		overflow: hidden;

		.tab {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ecf1fb;
			height: 100rpx;
			background: linear-gradient(180deg, #e3ebf9 0%, #ffffff 100%);

			view {
				width: 340rpx;
				line-height: 100rpx;
				text-align: center;
				color: #9e9e9e;
				position: relative;
			}

			view::after {
				content: '';
				width: 50rpx;
				height: 8rpx;
				display: block;
				background-color: #3264ed;
				border-radius: 4rpx;
				position: absolute;
				left: 50%;
				bottom: 14rpx;
				transform: translateX(-50%);
				opacity: 0;
			}

			view.select {
				background-color: #fff;
				color: #3264ed;
			}

			view.type1.select {
				border-radius: 0 40rpx 0 0;
			}

			view.type2.select {
				border-radius: 40rpx 0 0;
			}

			view.select::after {
				opacity: 1;
			}
		}

		.inputs_button {
			background-color: #fff;

			.inputs {
				padding: 150rpx 32rpx 0;
				margin-bottom: 80rpx;

				.account,
				.password,
				.vcode {
					height: 96rpx;
					border-radius: 20rpx;
					padding: 0 48rpx;
					display: flex;
					align-items: center;
					background-color: #f7fafc;

					input {
						flex: 1;
					}
				}

				.account {
					margin-bottom: 48rpx;
				}

				.vcode {
					text {
						text-wrap: nowrap;
						font-size: 26rpx;
						background-color: #fff;
						padding: 14rpx 30rpx;
						border-radius: 12rpx;
					}
				}
			}

			.button {
				padding: 0 32rpx;

				view {
					line-height: 96rpx;
					border-radius: 20rpx;
					text-align: center;
					font-size: 32rpx;
					background-color: #3264ed;
					color: #fff;
				}
			}
		}

	}

	.pact {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 120rpx;
		font-size: 24rpx;

		text {
			color: #3264ed;
		}

		radio {
			:deep(.uni-radio-input) {
				border: 1rpx solid #3264ed;
			}

			transform:scale(0.6)
		}
	}
}

.register-link {
	margin-top: 40rpx;
	text-align: center;
	font-size: 28rpx;
	color: #3264ed;
	padding-bottom: 60rpx;
}
</style>